<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">采购申请流程</div>
      </template>
      <div class="button-container">
        <el-button type="primary" @click="submitForm">提交</el-button>

        <el-button @click="goBack">返回</el-button>
      </div>
      <hr class="divider">
      <el-form :model="formData" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input :value="user.username" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input :value="user.department" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商">
              <!--              <el-select v-model="formData.supplier" placeholder="请选择">-->
              <!--                <el-option label="供应商 1" value="101"></el-option>-->
              <!--                <el-option label="供应商 2" value="103"></el-option>-->
              <!--              </el-select>-->
              <el-input placeholder="请输入供应商" v-model="formData.supplier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购金额">
              <el-input v-model.number="formData.totalAmount" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="item-card">
              <template #header>
                <div class="flex justify-between items-center">
                  <div>物品列表</div>
                  <el-button type="primary" @click="addItem">新增</el-button>
                </div>
              </template>
              <el-table :data="formData.items" stripe>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column label="采购物品" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.itemName" placeholder="请输入采购物品名称"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="采购数量" align="center">
                  <template #default="scope">
                    <el-input v-model.number="scope.row.quantity" type="number" placeholder="请输入采购数量"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center">
                  <template #default="scope">
                    <el-input v-model.number="scope.row.itemPrice" type="number" placeholder="请输入单价"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button type="danger" @click="removeItem(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

import axios from "axios";
import { ElMessage } from "element-plus";


//收到localstorage数据
const user = ref(getUser());
const userId = user.value.userId;
console.log(userId);

// const username = ref(user.value.username);


// 表单数据
const formData = ref({
  userId: userId,
  supplier: "",
  totalAmount: "",
  items: [
    {
      itemName: "",
      quantity: "",
      itemPrice: "",
    },
  ],
});

// 添加物品
const addItem = () => {


  // console.log(user.value.userId);这个可以没问题

  // const username = user.value.userId;
  // console.log(username);



  formData.value.items.push({
    itemName: "",
    quantity: "",
    itemPrice: "",
  });
};

// 删除物品
const removeItem = (index) => {
  formData.value.items.splice(index, 1);
};

// 提交表单
const submitForm = () => {




  axios.post(BASE_URL+"/v1/purchaseApplication/save", formData.value).then((response) => {
    console.log(formData.value);
    if (response.data.code === 2000) {
      ElMessage.success("添加成功！");
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};


// 返回
const goBack = () => {
  console.log("返回上一级");
  window.history.back();
};
</script>

<style scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}

.button-container {
  margin-bottom: 10px;
  text-align: right;
}

.divider {
  margin-bottom: 20px;
  border: none;
  border-top: 1px solid #ccc;
}

.item-card {
  margin-top: 20px;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}
</style>